<template>
	<div style="height: 1200px">
		<vue3-tree-org style="padding: 70px" center :data="data" :horizontal="horizontal" :collapsable="collapsable"
			:label-style="style" :node-draggable="true" :scalable="false" :only-one-node="onlyOneNode"
			:default-expand-level="1" :clone-node-drag="cloneNodeDrag" @on-contextmenu="onMenus"
			@on-node-click="onNodeClick" v-loading="dataListLoading">
			
			<!-- 自定义节点内容 -->
			<template v-slot="{ node }">
				<div class="tree-org-node__text node-label">
					<div>{{ node.label }}</div>
					<el-divider style="margin: 15px 0"></el-divider>
					<el-row class="col-font">
						<el-col :span="12">负责人:</el-col>
						<el-col :span="12">{{ node.$$data.superiorPrincipal }}</el-col>
					</el-row>
					<el-row class="col-font">
						<el-col :span="12">編制/员工数量:</el-col>
						<el-col :span="12">{{ node.$$data.superiorPrincipal }}</el-col>
					</el-row>
				</div>
			</template>
			<!-- 自定义展开按钮 -->
			<template v-slot:expand="{ node }">
				<div>{{ node.children.length }}</div>
			</template>
		</vue3-tree-org>
	</div>
</template>
<script setup lang="ts" name="ModuleOrganizationIndex">
import { ref } from 'vue'
import { ElMessage, MessageParamsWithType } from 'element-plus'
import service from '@/utils/request'

const data = ref({
	// id: 1,
	// label: 'xxx科技有限公司',
	// children: [
	// 	{
	// 		id: 2,
	// 		pid: 1,
	// 		label: '产品研发部',
	// 		style: { color: '#fff', background: '#108ffe' },
	// 		children: [
	// 			{ id: 6, pid: 2, label: '禁止编辑节点', disabled: true },
	// 			{ id: 8, pid: 2, label: '禁止拖拽节点1', noDragging: true },
	// 			{ id: 10, pid: 2, label: '测试' }
	// 		]
	// 	},
	// 	{
	// 		id: 3,
	// 		pid: 1,
	// 		label: '客服部',
	// 		children: [
	// 			{ id: 11, pid: 3, label: '客服一部' },
	// 			{ id: 12, pid: 3, label: '客服二部' }
	// 		]
	// 	},
	// 	{ id: 4, pid: 1, label: '业务部' }
	// ]
})
const horizontal = ref(false)
const collapsable = ref(false)
const onlyOneNode = ref(true)
const cloneNodeDrag = ref(true)
const expandAll = ref(true)
const dataListLoading = ref(false)
const style = ref({
	background: '#fff',
	color: '#5e6d82'
})

const onMenus = (node: any, command: any) => {
	console.log(node, command)
}

const onNodeClick = (e: any, data: { label: MessageParamsWithType }) => {
	ElMessage.info(data.label)
}

const findListLeft = () => {
	dataListLoading.value = true
	service
		.get('/nb/organization/list', {
			params: {}
		})
		.then((res: any) => {
			data.value = res.data[0]
		})
		.finally(() => {
			dataListLoading.value = false
		})
}
findListLeft()

const color = ['', '', '', '']
</script>
<style lang="scss" scoped>
.tree-org-node__text {
	text-align: left;
	font-family: 'PingFangSC-Regular', 'PingFang SC';
	font-weight: 400;
	font-style: normal;
	width: 200px;

	.custom-content {
		padding: 8px 0;
		margin-top: 8px;
		border-top: 1px solid currentColor;
	}
}

.col-font {
	text-align: left;
	font-family: 'PingFangSC-Regular', 'PingFang SC';
	font-weight: 400;
	font-style: normal;
	font-size: 12px;
	color: #727272;
}
</style>
